<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-page-header @back="close" content="详情"> </el-page-header>
      </div>
      <div class="info-wrap" v-if="info">
        <el-descriptions title="基本资料" :column="3" border>
          <el-descriptions-item label="业务订单号">{{
            info.merchantOrderNo
          }}</el-descriptions-item>
          <el-descriptions-item label="订单时间">{{
            info1.createTime
          }}</el-descriptions-item>
          <el-descriptions-item label="订单状态">
            <dict-tag
              :options="dict.type.logistics_order_status"
              :value="info.status"
            />
          </el-descriptions-item>
          <el-descriptions-item label="患者姓名">{{
            info1.patientName
          }}</el-descriptions-item>
          <el-descriptions-item label="处方号">{{
            info1.takeMedicineIdentityValue
          }}</el-descriptions-item>
          <el-descriptions-item label="患者身份证号">{{
            info1.patientIdentityCardNo
          }}</el-descriptions-item>
          <el-descriptions-item label="患者联系方式">{{
            info1.patientPhone
          }}</el-descriptions-item>
          <el-descriptions-item label="客户处方单号">{{
            info1.prescriptionNos
          }}</el-descriptions-item>
          <el-descriptions-item label="凭证图片">
            <template v-if="info1.proofImages">
              <image-preview
                :src="image"
                style="margin-right: 5px"
                :width="50"
                :height="50"
                :key="index"
                v-for="(image, index) in info1.proofImages.split(',')"
              />
            </template>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="info-wrap" v-if="info">
        <el-descriptions title="收寄信息" :column="3" border>
          <el-descriptions-item label="付款方式">
            <template v-if="info.payMethod == 1">
              {{ info.monthlyCard ? "寄付月结" : "寄付现结" }}
            </template>
            <dict-tag
              :options="dict.type.logistics_payment_types"
              :value="info.payMethod"
              v-else
            />
          </el-descriptions-item>
          <el-descriptions-item label="月结卡号">{{
            info.monthlyCard
          }}</el-descriptions-item>
          <el-descriptions-item label="托寄物名称">{{
            info2.depositumInfo
          }}</el-descriptions-item>
          <el-descriptions-item label="寄托物数量">{{
            info2.depositumNo
          }}</el-descriptions-item>
          <el-descriptions-item label="保价类型">
            <dict-tag
              :options="dict.type.logistics_insurance_types"
              :value="info.insureType"
          /></el-descriptions-item>
          <el-descriptions-item label="寄托物类型">
            <dict-tag
              :options="dict.type.logistics_product_type"
              :value="info.productCode"
            />
          </el-descriptions-item>
          <el-descriptions-item label="声明价值"
            >￥{{
              (info.statementValue / 100).toFixed(2)
            }}</el-descriptions-item
          >
          <el-descriptions-item label="是否保鲜">{{
            info.retainFreshness == "true" ? "是" : "否"
          }}</el-descriptions-item>
          <el-descriptions-item label="运单号">{{
            info.mailNo
          }}</el-descriptions-item>
          <el-descriptions-item label="包裹数">{{
            info.packagesNo
          }}</el-descriptions-item>
          <el-descriptions-item label="包裹重量"
            >{{ info2.parcelWeighs }}kg</el-descriptions-item
          >
          <el-descriptions-item label=""></el-descriptions-item>
          <el-descriptions-item label="收件人姓名">{{
            info3.destName
          }}</el-descriptions-item>
          <el-descriptions-item label="收件人电话">{{
            info3.destPhone
          }}</el-descriptions-item>
          <el-descriptions-item label="收件地址">{{
            `${info3.destProvince || ""}${info3.destCity || ""}${
              info3.destDistrict || ""
            }${info3.destAddress || ""}`
          }}</el-descriptions-item>
          <el-descriptions-item label="寄件人姓名">{{
            info3.srcName
          }}</el-descriptions-item>
          <el-descriptions-item label="寄件人电话">{{
            info3.srcPhone
          }}</el-descriptions-item>
          <!-- <el-descriptions-item label="备注">{{
            info3.parcelWeighs
          }}</el-descriptions-item> -->
          <el-descriptions-item label="寄件地址">{{
            `${info3.srcProvince || ""}${info3.srcCity || ""}${
              info3.srcDistrict || ""
            }${info3.srcAddress || ""}`
          }}</el-descriptions-item>
          <el-descriptions-item label="签回单号">{{
            info.returnTrackingNo
          }}</el-descriptions-item>
          <el-descriptions-item label="快递产品">{{
            info3.srcCompany
          }}</el-descriptions-item>
          <el-descriptions-item label="通知小哥取件">{{
            info.callFlag == 1 ? "是" : "否"
          }}</el-descriptions-item>
          <el-descriptions-item label="预约取件时间">{{
            info.sendStartTime
          }}</el-descriptions-item>
          <el-descriptions-item label="备注">{{
            info.remark
          }}</el-descriptions-item>
          <el-descriptions-item label="附加数据">{{
            info.attach
          }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{
            info.createTime
          }}</el-descriptions-item>
          <el-descriptions-item label="来源">{{
            info.sourceId
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="info-wrap" v-if="info">
        <el-descriptions title="预创建订单" :colon="false">
          <el-descriptions-item label="">
            <el-table :data="list" border style="width: 100%">
              <el-table-column
                label="地址类型"
                align="center"
                prop="contactType"
              >
                <template slot-scope="scope">
                  {{ scope.row.contactType == 1 ? "寄件信息" : "收件信息" }}
                </template>
              </el-table-column>
              <el-table-column
                label="收寄双方联系方式"
                align="center"
                prop="tel"
              />
              <el-table-column
                label="收寄双方地址"
                align="center"
                prop="province"
              >
                <template slot-scope="scope">
                  {{
                    `${scope.row.province || ""}${scope.row.city || ""}${
                      scope.row.county || ""
                    }${scope.row.address || ""}`
                  }}
                </template>
              </el-table-column>
              <el-table-column
                label="月结卡号"
                align="center"
                prop="monthlyCard"
              />
              <el-table-column
                label="快件产品类型"
                align="center"
                prop="expressType"
              />
            </el-table>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- <el-divider></el-divider> -->
      <!-- <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
        style="height: 100%"
      >
        <el-tab-pane label="寄件信息" name="first">
          <detail :id="id"></detail>
        </el-tab-pane>
        <el-tab-pane label="处方信息" name="second"></el-tab-pane>
        <el-tab-pane label="推送订单" name="thirdly"></el-tab-pane>
      </el-tabs> -->
    </el-card>
  </div>
</template>

<script>
import {
  getCreateOrder,
  getCreatePatientInfo,
  getCreateCargoDetail,
  getCreateContactInfo,
  getCreateService,
  getCreateWeiPaiParams,
  listContactInfo,
} from "@/api/sf/createOrder";
// import detail from "./detail.vue";
// import diagnosticMessage from "./diagnosticMessage.vue";
// import pushOrder from "./pushOrder.vue";

export default {
  dicts: [
    "logistics_payment_types",
    "logistics_order_status",
    "logistics_product_type",
    "logistics_insurance_types",
  ],
  components: {
    // detail,
    //   diagnosticMessage,
    //   pushOrder,
  },
  data() {
    return {
      // 假设有初始数据
      info: null,
      list: [],
      outpatientNo: "",
      id: "",
      activeName: "first",
      info1: null, //患者信息
      info2: null, //物品信息
      info3: null, //寄件信息
      info4: null, //其他服务
      info5: null, //微派信息
    };
  },
  created() {
    this.id = this.$route.params && this.$route.params.id;
    this.getDetail();
    this.getDetail1(); // 患者信息
    this.getDetail2(); // 物品信息
    this.getDetail3(); // 收寄件信息
    this.getList(); //预创建订单
    // this.getDetail4(); // 其他服务
    // this.getDetail5(); // 微派信息
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    /** 修改按钮操作 */
    getDetail() {
      getCreateOrder(this.id).then((response) => {
        this.info = response.data;
      });
    },
    // 患者信息
    getDetail1() {
      getCreatePatientInfo(this.id).then((response) => {
        this.info1 = response.data;
      });
    },
    // 物品信息
    getDetail2() {
      getCreateCargoDetail(this.id).then((response) => {
        this.info2 = response.data;
      });
    },
    // 收寄件信息
    getDetail3() {
      getCreateContactInfo(this.id).then((response) => {
        this.info3 = response.data;
      });
    },
    // 其他服务
    getDetail4() {
      getCreateService(this.id).then((response) => {
        this.info4 = response.data;
      });
    },
    // 微派信息
    getDetail5() {
      getCreateWeiPaiParams(this.id).then((response) => {
        this.info5 = response.data;
      });
    },
    /** 查询云HIS-预约订单列表 */
    getList() {
      this.loading = true;
      listContactInfo({ id: this.id }).then((response) => {
        this.list = response.rows;
      });
    },
    /** 关闭按钮 */
    close() {
      const obj = {
        path: "/sf/createOrder",
        query: { t: Date.now(), pageNum: this.$route.query.pageNum },
      };
      this.$tab.closeOpenPage(obj);
    },
  },
};
</script>

<style scoped lang="scss">
.info-wrap {
  margin-bottom: 28px;
  .headImg {
    margin-right: 28px;
    display: block;
    width: 50px;
    height: 50px;
  }
}
.box-card {
  min-height: calc(100vh - 136px);
}
.amount-wrap {
  margin-top: 24px;
  .amount {
    font-weight: bold;
    display: flex;
    align-self: center;
    justify-content: flex-end;
    .num {
      color: #f72d38;
      min-width: 100px;
      text-align: right;
    }
  }
}
</style>
